<template>
  <div id="buildDetails">
    <!-- 建筑与相关人员 -->
    <el-dialog
      title="建筑详情"
      :visible.sync="dialogVisible"
      width="1150px"
      height="800px"
      :modal="false"
      custom-class="imporLayer"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="住房" name="first">
          <div class="cardStyleList">
            <div class="cardStyleListItem" v-for="(item,index) in housing" :key="index" @click="handleView(item)">
              <div class="name" ><span style="color:white">户主：</span><span @click.stop="nameClick(item)">{{item.xm}}</span></div>
              <el-row :gutter="20" class="allOther">
                <el-col :span="8" v-if="item.zzmm=='党员'">政治面貌：<span class="other" style="color: rgb(252, 65, 65);cursor:pointer" @click="zzmmClick(item)">{{item.zzmm}}</span></el-col>
                <el-col :span="8" v-else>政治面貌：<span class="other">{{item.zzmm}}</span></el-col>
                <el-col :span="8">联系电话：<span class="other">{{item.lxdh}}</span></el-col>
                <el-col :span="8">楼高和层数：<span class="other">{{item.lghcs}}</span></el-col>
                <el-col :span="8">联系地址：<span class="other">{{item.dz}}</span></el-col>
                <el-col :span="8">门牌号：<span class="other">{{item.mph}}</span></el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商户" name="second">
          <el-table :data="merchant" style="width: 96%" height="300px">
            <!-- <el-table-column prop="sswg" label="所属网格编号" width="120">
            </el-table-column> -->
            <el-table-column prop="shmc" label="商户名称"> </el-table-column>
            <!-- <el-table-column
              prop="tyshxydm"
              label="统一社会性用代码"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="zzjgdm" label="组织机构代码" width="120">
            </el-table-column>
            <el-table-column prop="gszch" label="工商注册号" width="100">
            </el-table-column>
            <el-table-column prop="djjg" label="登记机关" width="80">
            </el-table-column> -->
            <el-table-column prop="shdz" label="商户地址"> </el-table-column>
            <!-- <el-table-column prop="qylx" label="企业类型" width="80">
            </el-table-column>
            <el-table-column prop="sshy" label="所属行业" width="80">
            </el-table-column>
            <el-table-column prop="clrq" label="成立日期" width="80">
            </el-table-column> -->
            <el-table-column prop="jyz" label="经营者"> </el-table-column>
            <el-table-column prop="jyzdh" label="经营者电话"> </el-table-column>
            <el-table-column prop="yyzzjyfw" label="营业执照经营范围">
            </el-table-column>
            <el-table-column prop="scgsxjsj" label="上次工商巡检时间">
            </el-table-column>
            <el-table-column prop="scxfjcsj" label="上次消防检查时间">
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewSh(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业" name="third"></el-tab-pane>
        <el-tab-pane label="租房" name="fourth"></el-tab-pane>
        <el-tab-pane label="重点场所" name="five">
          <el-table :data="zdcsing" style="width: 96%" height="300px">
            <el-table-column prop="csmc" label="商户名称" width="150">
            </el-table-column>
            <el-table-column
              prop="tyshxydm"
              label="统一社会性用代码"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="zczb" label="注册资本" width="120">
            </el-table-column>
            <el-table-column prop="dz" label="地址" width="100">
            </el-table-column>
            <el-table-column prop="fddbr" label="法定代表人" width="80">
            </el-table-column>
            <el-table-column prop="lxr" label="联系人" width="100">
            </el-table-column>
            <el-table-column prop="lxfs" label="联系方式" width="80">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 人员与事件相关联 -->
    <el-dialog
      title="人员关联事件详情"
      :visible.sync="eventDetails"
      width="700px"
      height="800px"
      :modal="false"
      custom-class="deep"
      @close="dialogclose"
    >
      <div>
        <el-table
          :data="everyPersonEvent"
          style="width: 96%"
          height="300px"
          @row-click="rowClick"
        >
          <el-table-column prop="xm" label="姓名"> </el-table-column>
          <el-table-column prop="wtsd" label="问题属地"> </el-table-column>
          <el-table-column prop="gk" label="概况"> </el-table-column>
          <el-table-column prop="xbsj" label="限办时间"> </el-table-column>
          <el-table-column prop="djsj" label="登记时间"> </el-table-column>
          <el-table-column prop="czjbz" label="初重件标志"> </el-table-column>
          <el-table-column prop="mydqk" label="满意度情况"> </el-table-column>
          <el-table-column prop="blfs" label="办理方式"> </el-table-column>
          <el-table-column prop="sjhm" label="手机号码"> </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 相关联的详细信息 -->
    <el-dialog
      title="人员关联事件详情"
      :visible.sync="everyRowDetails"
      width="500px"
      :modal="false"
      custom-class="deep"
      @close="Rowclose"
    >
      <div class="content">
        <el-row>
          <el-col :span="12" class="attributeStyle">姓名：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.xm }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">手机号：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.sjhm }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">问题属地：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.wtsd }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">办理方式</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.blfs }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">概况：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.gk }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">限办时间：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.xbsj }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">登记时间：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.djsj }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">初重件标志：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.czjbz }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">满意度情况：</el-col>
          <el-col :span="12">{{ everyRowDetailsMsg.mydqk }}</el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 相关联的详细信息 -->
    <el-dialog
      title="党员联户详情"
      :visible.sync="zzmmClickDetails"
      width="1150px"
      height="800px"
      :modal="false"
      custom-class="deep"
      @close="zzmmClickClose"
    >
      <div class="contentzzmm">
        <el-row>
          <el-col :span="4" class="attributeStyle">上访户主：</el-col>
          <el-col :span="20">范荣贵</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="attributeStyle">上门时间：</el-col>
          <el-col :span="20">2021/03/25 16:28:14</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="attributeStyle">户主情况：</el-col>
          <el-col :span="20">
            <el-input
              v-model="householderValue"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 6 }"
              readonly
              size="mini"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="attributeStyle">反馈：</el-col>
          <el-col :span="20">
            <el-input
              v-model="feedback"
              type="textarea"
              readonly
              size="mini"
              :autosize="{ minRows: 1, maxRows: 6 }"
            ></el-input>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 每一行详细信息 -->
    <el-dialog
      title="详情"
      :visible.sync="RowDetails"
      width="500px"
      :modal="false"
      custom-class="imporLayer"
    >
      <div class="content">
        <el-row>
          <el-col :span="12" class="attributeStyle">行政区划：</el-col>
          <el-col :span="12">{{ houseRowDetails.xzqh }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">地址：</el-col>
          <el-col :span="12">{{ houseRowDetails.dz }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">门牌号：</el-col>
          <el-col :span="12">{{ houseRowDetails.mph }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">房屋属性：</el-col>
          <el-col :span="12">{{ houseRowDetails.fwsx }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">入住人数：</el-col>
          <el-col :span="12">{{ houseRowDetails.rzrs }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">姓名：</el-col>
          <el-col :span="12">{{ houseRowDetails.xm }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">性别：</el-col>
          <el-col :span="12">{{ houseRowDetails.xb }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">身份证号：</el-col>
          <el-col :span="12">{{ houseRowDetails.sfzh }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">联系电话：</el-col>
          <el-col :span="12">{{ houseRowDetails.lxdh }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">政治面貌：</el-col>
          <el-col :span="12">{{ houseRowDetails.zzmm }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">与房屋关系：</el-col>
          <el-col :span="12">{{ houseRowDetails.yfwgx }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">楼高和层数：</el-col>
          <el-col :span="12">{{ houseRowDetails.lghcs }}</el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 商户每一行详细信息 -->
    <el-dialog
      title="详情"
      :visible.sync="ShRowDetails"
      width="500px"
      :modal="false"
      custom-class="deep"
    >
      <div class="content">
        <el-row>
          <el-col :span="12" class="attributeStyle">所属网格编号：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.sswg }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">商户名称：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.shmc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">统一社会信用代码</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.tyshxydm }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">组织机构代码：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.zzjgdm }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">工商注册号：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.gszch }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">登记机关：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.djjg }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">商户地址：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.shdz }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">企业类型：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.qylx }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">所属行业：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.sshy }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">成立日期：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.clrq }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">经营者：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.jyz }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">经营者电话：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.jyzdh }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">营业执照经营范围：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.yyzzjyfw }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">上次工商巡检时间</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.scgsxjsj }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="attributeStyle">上次消防检查时间：</el-col>
          <el-col :span="12">{{ ShhouseRowDetails.scxfjcsj }}</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectZhufxxByGridId,
  selectShxxByGridId,
  selectZdcsByGridId,
  geteventwithname,
} from "../../utils/api";
export default {
  name: "resident",
  data() {
    return {
      housing: [],
      householderValue: "孤寡老人，常年一人在家",
      feedback: "一切正常，请按时回访",
      show: false,
      RowDetails: false,
      ShRowDetails: false,
      dialogVisible: false,
      eventDetails: false,
      everyRowDetails: false,
      zzmmClickDetails: false,
      showNameWithEvent: false,
      activeName: "first",
      pid: 0,
      merchant: [],
      zdcsing: [],
      nameWithEventMsg: {},
      everyPersonEvent: [],
      everyRowDetailsMsg: [],
      houseRowDetails: {},
      ShhouseRowDetails: {},
    };
  },
  mounted() {
    window.residentInit = this.getData;
  },
  methods: {
    handleView(row) {
      this.RowDetails = true;
      this.houseRowDetails = row;
    },
    handleViewSh(row) {
      this.ShRowDetails = true;
      this.ShhouseRowDetails = row;
    },
    getData(id) {
      this.housing = [];
      this.dialogVisible = true;
      var me = this;
      this.pid = id;
      this.activeName = "first";
      selectZhufxxByGridId(id).then((res) => {
        if (res.data.code === 200) {
          for (let i = 0, l = res.data.data.length; i < l; i++) {
            me.housing.push({
              xzqh: res.data.data[i].xzqh || "--",
              dz: res.data.data[i].dz || "--",
              mph: res.data.data[i].mph || "--",
              fwsx: res.data.data[i].fwsx || "--",
              rzrs: res.data.data[i].rzrs || "--",
              xm: res.data.data[i].xm || "--",
              xb: res.data.data[i].xb || "--",
              sfzh: res.data.data[i].sfzh || "--",
              lxdh: res.data.data[i].lxdh || "--",
              zzmm: res.data.data[i].zzmm || "--",
              yfwgx: res.data.data[i].yfwgx || "--",
              lghcs: res.data.data[i].lghcs || "--",
            });
          }
        }
      });
    },
    handleClick(tab, event) {
      this.merchant = [];
      var me = this;
      switch (tab.index) {
        case "1":
          selectShxxByGridId(this.pid).then((res) => {
            if (res.data.code === 200) {
              for (let i = 0, l = res.data.data.length; i < l; i++) {
                me.merchant.push({
                  sswg: res.data.data[i].sswg || "--",
                  shmc: res.data.data[i].shmc || "--",
                  tyshxydm: res.data.data[i].tyshxydm || "--",
                  zzjgdm: res.data.data[i].zzjgdm || "--",
                  gszch: res.data.data[i].gszch || "--",
                  djjg: res.data.data[i].djjg || "--",
                  shdz: res.data.data[i].shdz || "--",
                  qylx: res.data.data[i].qylx || "--",
                  sshy: res.data.data[i].sshy || "--",
                  clrq: res.data.data[i].clrq || "--",
                  jyz: res.data.data[i].jyz || "--",
                  jyzdh: res.data.data[i].jyzdh || "--",
                  yyzzjyfw: res.data.data[i].yyzzjyfw || "--",
                  scgsxjsj: res.data.data[i].scgsxjsj || "--",
                  scxfjcsj: res.data.data[i].scxfjcsj || "--",
                });
              }
            }
          });
          break;
        case "4":
          selectZdcsByGridId(this.pid).then((res) => {
            if (res.data.code === 200) {
              me.zdcsing = [];
              for (let i = 0, l = res.data.data.length; i < l; i++) {
                me.zdcsing.push({
                  csmc: res.data.data[i].csmc || "--",
                  tyshxydm: res.data.data[i].tyshxydm || "--",
                  zczb: res.data.data[i].zczb || "--",
                  dz: res.data.data[i].dz || "--",
                  fddbr: res.data.data[i].fddbr || "--",
                  lxr: res.data.data[i].lxr || "--",
                  lxfs: res.data.data[i].lxfs || "--",
                });
              }
            }
          });
          break;
      }
    },

    // 监听姓名点击
    nameClick(info) {
      var name = info.xm;
      // var phone = info.lxdh;
      var phone = "";
      if (name == "--") {
        name = "";
      }
      // if (phone == "--") {
      //   phone = "";
      // }
      if (name == "") {
        this.$message({
          message: "用户名为空，无法查询当前信息！",
          type: "warning",
        });
        return;
      } else {
        geteventwithname(name, phone).then((res) => {
          if (res.data.code == 200) {
            this.eventDetails = true;
            this.everyPersonEvent = res.data.data;
          } else {
            this.$message({
              message: "未查询到相关事件！",
              type: "warning",
            });
          }
        });
      }
    },

    // 监听每一行点击
    rowClick(info) {
      this.everyRowDetailsMsg = info;
      this.everyRowDetails = true;
    },

    // 监听点击"党员"
    zzmmClick(info) {
      this.zzmmClickDetails = true;
    },
    dialogclose() {
      this.eventDetails = false;
    },
    Rowclose() {
      this.everyRowDetails = false;
    },
    zzmmClickClose() {
      this.zzmmClickDetails = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
.el-table {
  background: unset;
  margin-top: 5px;
  margin: auto;
}
.nameWithEvent {
  color: skyblue;
}
.nameWithEvent:hover {
  cursor: pointer;
}

.zzmmWithPeople {
  color: rgb(252, 65, 65);
}
.zzmmWithPeople:hover {
  cursor: pointer;
}
.content,
.contentzzmm {
  color: white;
  width: 100%;
  /* height: 400px; */
  margin: 0 50px;
}
.attributeStyle {
  color: #7bf8ce;
}
.contentzzmm {
  margin: 0 35px;
}
.contentzzmm .el-row {
  margin: 10px 10px;
}
.el-table {
  font-size: 18px;
}
.cardStyleList {
  width: 95%;
  margin: 10px auto;
  height: 415px;
  overflow-y:auto;
  background: transparent;
}
.cardStyleList::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
.cardStyleList::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #0affbd;
  }
.cardStyleList::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   :transparent;
  }
.cardStyleListItem {
  width: 95%;
  margin: 10px auto;
  /* height: 100px; */
  border: 1px solid rgb(0,197,220);
  border-radius: 15px;
  background: transparent;
  padding: 5px 10px;
  /* border-bottom: 1px #fff dashed; */
}
.cardStyleListItem:hover{
  background: rgba(0,197,220,.5);
}
.name{
  /* float: left; */
  color: skyblue;
  font-size: 20px;
  margin-bottom: 5px;
  cursor: pointer;
}
.allOther{
  color:white;
}
.other{
  /* color:rgb(212, 212, 4); */
  font-size: 16px;
}
</style>
